import React from 'react';
import Link from 'next/link';
import { FaGraduationCap, FaChalkboardTeacher, FaUserFriends, FaLaptopCode } from 'react-icons/fa';

export default function Home() {
  return (
    <div className="bg-gradient-to-r from-sky-200 to-blue-500">
      <header className="bg-white shadow-sm fixed w-full top-0">
        <div className="container mx-auto flex justify-between items-center h-16">
          <h1 className="text-3xl font-bold text-gray-700">Виртуальный авиационный класс</h1>
          <div className="flex items-center">
            <Link
              href="/auth"
              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
            >
              Участвовать
            </Link>
          </div>
        </div>
      </header>

      <main className="container mx-auto mt-16">
        <section className="mb-16">
          <div className="flex flex-col items-center">
            <h2 className="text-4xl font-bold text-gray-700">
              Освойте основы авиации в виртуальном классе
            </h2>
            <p className="text-gray-600 mt-4">
              Инновационная образовательная программа для школьников 8-11 классов
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12">
            <div className="bg-white rounded-lg shadow-md p-6 hover:bg-blue-100">
              <div className="flex items-center mb-4">
                <FaGraduationCap className="text-blue-500 text-2xl" />
                <h3 className="text-lg font-medium text-gray-800 ml-4">
                  Продолжение обучения в своей школе
                </h3>
              </div>
              <p className="text-gray-600">
                Совмещайте основную учебу с углубленным изучением
                авиационных дисциплин.
              </p>
            </div>

            <div className="bg-white rounded-lg shadow-md p-6 hover:bg-blue-100">
              <div className="flex items-center mb-4">
                <FaChalkboardTeacher className="text-green-500 text-2xl" />
                <h3 className="text-lg font-medium text-gray-800 ml-4">
                  Дополнительное обучение в виртуальном классе
                </h3>
              </div>
              <p className="text-gray-600">
                Интерактивные занятия, практические задания и тесты под
                руководством опытных педагогов.
              </p>
            </div>

            <div className="bg-white rounded-lg shadow-md p-6 hover:bg-blue-100">
              <div className="flex items-center mb-4">
                <FaUserFriends className="text-orange-500 text-2xl" />
                <h3 className="text-lg font-medium text-gray-800 ml-4">
                  Интенсивы в дни каникул
                </h3>
              </div>
              <p className="text-gray-600">
                Очные встречи и мастер-классы для погружения в профессию
                авиатора.
              </p>
            </div>
            <div className="bg-white rounded-lg shadow-md p-6 hover:bg-blue-100">
              <div className="flex items-center mb-4">
                <FaLaptopCode className="text-purple-500 text-2xl" />
                <h3 className="text-lg font-medium text-gray-800 ml-4">
                  Онлайн-обучение с интерактивами
                </h3>
              </div>
              <p className="text-gray-600">
                Современные образовательные технологии для максимального
                эффекта от обучения.
              </p>
            </div>
          </div>
        </section>

        <section className="text-center mb-16">
          <h2 className="text-4xl font-bold text-gray-700">Как стать курсантом</h2>
          <p className="text-gray-600 mt-4">Станьте частью команды будущего!</p>
        </section>

        <section className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-24">
          <div className="bg-white rounded-lg shadow-md p-6 hover:bg-blue-100">
            <h3 className="text-lg font-medium text-gray-800">Шаг 1: Регистрация</h3>
            <p className="text-gray-600 mt-4">
              Зарегистрируйтесь на сайте A.S.T.R.A КнАГУ.
            </p>
            <Link
              href="/auth"
              className="text-blue-500 font-medium hover:underline"
            >
              Перейти к регистрации
            </Link>
          </div>

          <div className="bg-white rounded-lg shadow-md p-6 hover:bg-blue-100">
            <h3 className="text-lg font-medium text-gray-800">Шаг 2: Отборочный этап</h3>
            <p className="text-gray-600 mt-4">
              Пройдите регистрацию на поступление в виртуальный авиационный
              класс и загрузите портфолио по техническим дисциплинам.
            </p>
            <p className="text-gray-600 mt-4">Успешно пройдите конкурсный отбор портфолио.</p>
          </div>

          <div className="bg-white rounded-lg shadow-md p-6 hover:bg-blue-100">
            <h3 className="text-lg font-medium text-gray-800">Шаг 3: Обучение</h3>
            <p className="text-gray-600 mt-4">
              Примите участие в онлайн-занятиях, интенсивах и мероприятиях
              проекта.
            </p>
            <p className="text-gray-600 mt-4">Станьте высококвалифицированным
              специалистом в области авиации!</p>
          </div>
        </section>

        <section className="bg-gradient-to-r from-blue-300 to-blue-400 py-16 w-full">
          <div className="container mx-auto flex flex-col items-center w-full">
            <h2 className="text-4xl font-bold text-gray-700">Присоединяйтесь к нам!</h2>
            <p className="text-gray-600 mt-4">
              Не упустите шанс стать частью уникального проекта и
              построить успешную карьеру в авиационной сфере.
            </p>
            <Link
              href="/auth"
              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 mt-8"
            >
              Участвовать
            </Link>
          </div>
        </section>
      </main>

      <footer className="bg-gray-200 text-center py-4">
        &copy; 2024 Виртуальный авиационный класс
      </footer>
    </div>
  );
};